<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站手机端我的页面集合</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #1877F2;
      --secondary: #6c757d;
      --light: #f8f9fa;
      --dark: #343a40;
      --white: #ffffff;
      --border: #eee;
      --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      
      /* 不同风格主题色 */
      --style1: #1877F2; /* 经典社交蓝 */
      --style2: #E1306C; /* 活力粉 */
      --style3: #3B82F6; /* 科技蓝 */
      --style4: #111827; /* 深色模式 */
      --style5: #F97316; /* 活力橙 */
      --style6: #8B5CF6; /* 优雅紫 */
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f5f5f5;
      color: var(--dark);
      min-height: 100vh;
      padding: 0;
      margin: 0;
    }
    
    .container {
      max-width: 420px;
      margin: 0 auto;
      background-color: var(--white);
      min-height: 100vh;
      box-shadow: var(--shadow);
      overflow: hidden;
      position: relative;
    }
    
    /* 主页面容器 */
    .profile-page {
      display: none;
      min-height: 100vh;
    }
    
    .profile-page.active {
      display: block;
      animation: fadeIn 0.3s ease forwards;
    }
    
    /* 顶部导航栏 */
    .page-header {
      padding: 20px;
      position: relative;
      text-align: center;
    }
    
    .page-title {
      font-size: 20px;
      font-weight: 600;
      margin: 0;
    }
    
    .header-actions {
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      gap: 15px;
    }
    
    .header-btn {
      background: none;
      border: none;
      color: var(--dark);
      font-size: 20px;
      cursor: pointer;
    }
    
    /* 个人资料头部 */
    .profile-header {
      padding: 25px 20px;
      position: relative;
    }
    
    .profile-cover {
      width: 100%;
      height: 140px;
      border-radius: 16px 16px 0 0;
      object-fit: cover;
      display: block;
    }
    
    .profile-avatar {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      object-fit: cover;
      border: 4px solid var(--white);
      position: absolute;
      bottom: -45px;
      left: 25px;
    }
    
    .profile-info {
      padding-top: 55px;
      padding-left: 25px;
      padding-right: 25px;
    }
    
    .profile-name {
      font-size: 22px;
      font-weight: 700;
      margin: 0 0 5px 0;
    }
    
    .profile-bio {
      color: var(--secondary);
      font-size: 14px;
      margin: 0 0 15px 0;
    }
    
    .profile-stats {
      display: flex;
      gap: 20px;
      margin-bottom: 15px;
    }
    
    .stat-item {
      text-align: center;
    }
    
    .stat-value {
      font-weight: 700;
      font-size: 17px;
    }
    
    .stat-label {
      font-size: 12px;
      color: var(--secondary);
    }
    
    .profile-actions {
      display: flex;
      gap: 10px;
      margin-bottom: 20px;
    }
    
    .profile-btn {
      flex: 1;
      padding: 10px;
      border-radius: 8px;
      font-size: 15px;
      font-weight: 600;
      border: none;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }
    
    .btn-primary {
      background-color: var(--primary);
      color: white;
    }
    
    .btn-outline {
      background-color: transparent;
      border: 1px solid var(--primary);
      color: var(--primary);
    }
    
    /* 内容区域 */
    .content-tabs {
      display: flex;
      border-bottom: 1px solid var(--border);
    }
    
    .tab-item {
      flex: 1;
      text-align: center;
      padding: 12px 0;
      font-size: 15px;
      font-weight: 500;
      color: var(--secondary);
      position: relative;
      cursor: pointer;
    }
    
    .tab-item.active {
      color: var(--primary);
    }
    
    .tab-content {
      padding: 15px;
    }
    
    /* 发布内容网格 */
    .posts-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 3px;
    }
    
    .post-item {
      aspect-ratio: 1/1;
      position: relative;
      overflow: hidden;
    }
    
    .post-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .post-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3);
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.2s;
    }
    
    .post-item:hover .post-overlay {
      opacity: 1;
    }
    
    /* 菜单列表 */
    .menu-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .menu-item {
      padding: 15px 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    
    .menu-item:hover {
      background-color: var(--light);
    }
    
    .menu-icon {
      width: 24px;
      height: 24px;
      margin-right: 15px;
      color: var(--primary);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .menu-text {
      flex: 1;
      font-size: 16px;
    }
    
    .menu-arrow {
      color: var(--secondary);
      font-size: 18px;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1010;
      background-color: white;
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
      width: 180px;
    }
    
    .switcher-header {
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid #eee;
    }
    
    .switcher-option {
      padding: 12px 16px;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.2s;
    }
    
    .switcher-option:hover {
      background-color: #f9f9f9;
    }
    
    .switcher-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 控制按钮 */
    .control-buttons {
      padding: 15px 20px;
      display: flex;
      gap: 10px;
      background-color: white;
      border-top: 1px solid var(--border);
      position: fixed;
      bottom: 0;
      width: 100%;
      max-width: 420px;
      box-sizing: border-box;
      z-index: 1000;
    }
    
    .control-btn {
      flex: 1;
      padding: 10px;
      border: none;
      border-radius: 8px;
      background-color: var(--primary);
      color: white;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
    }
    
    /* 风格1：经典社交 - 卡片式布局 */
    .style-1 {
      --primary: var(--style1);
    }
    
    .style-1 .profile-header {
      background-color: #f5f7fa;
      padding-bottom: 60px;
    }
    
    .style-1 .card-section {
      background-color: var(--white);
      border-radius: 16px;
      box-shadow: var(--shadow);
      margin: -30px 15px 15px;
      overflow: hidden;
    }
    
    /* 风格2：活力粉色 - 标签式布局 */
    .style-2 {
      --primary: var(--style2);
    }
    
    .style-2 .profile-header {
      background: linear-gradient(135deg, #fce4ec, #f8bbd0);
      padding-bottom: 60px;
    }
    
    .style-2 .tag-container {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 15px;
    }
    
    .style-2 .profile-tag {
      background-color: rgba(225, 48, 108, 0.1);
      color: var(--primary);
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 12px;
    }
    
    .style-2 .content-tabs {
      background-color: var(--white);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .style-2 .tab-item.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 3px;
      background-color: var(--primary);
      border-radius: 3px 3px 0 0;
    }
    
    /* 风格3：科技蓝 - 简约数据式布局 */
    .style-3 {
      --primary: var(--style3);
    }
    
    .style-3 .profile-page {
      background-color: #f8fafc;
    }
    
    .style-3 .profile-header {
      background-color: var(--primary);
      padding-bottom: 60px;
    }
    
    .style-3 .profile-avatar {
      border: 4px solid #f8fafc;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }
    
    .style-3 .profile-name {
      color: var(--primary);
    }
    
    .style-3 .stat-card {
      background-color: var(--white);
      border-radius: 10px;
      padding: 15px;
      margin-bottom: 15px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
    
    .style-3 .stat-card-title {
      font-size: 14px;
      color: var(--secondary);
      margin-bottom: 10px;
    }
    
    .style-3 .posts-grid {
      gap: 6px;
    }
    
    .style-3 .post-item {
      border-radius: 8px;
      overflow: hidden;
    }
    
    /* 风格4：深色模式 - 沉浸式布局 */
    .style-4 {
      --primary: var(--style4);
      --dark: white;
      --secondary: #9ca3af;
      --border: #374151;
      --light: #1f2937;
    }
    
    .style-4 .container {
      background-color: #111827;
      color: white;
    }
    
    .style-4 .profile-header {
      background-color: #1f2937;
      padding-bottom: 60px;
    }
    
    .style-4 .profile-avatar {
      border-color: #111827;
      border-width: 3px;
    }
    
    .style-4 .btn-outline {
      border-color: #3b82f6;
      color: #3b82f6;
    }
    
    .style-4 .btn-primary {
      background-color: #3b82f6;
    }
    
    .style-4 .post-overlay {
      background-color: rgba(0, 0, 0, 0.6);
    }
    
    .style-4 .menu-item:hover {
      background-color: #1f2937;
    }
    
    .style-4 .tab-item.active {
      color: #3b82f6;
    }
    
    /* 风格5：活力橙 - 模块化布局 */
    .style-5 {
      --primary: var(--style5);
    }
    
    .style-5 .profile-header {
      background: linear-gradient(90deg, #F97316, #FB923C);
      padding-bottom: 60px;
      color: white;
    }
    
    .style-5 .profile-name {
      color: white;
    }
    
    .style-5 .profile-bio {
      color: rgba(255, 255, 255, 0.9);
    }
    
    .style-5 .profile-actions {
      margin: 0 15px 15px;
    }
    
    .style-5 .profile-btn {
      border-radius: 25px;
    }
    
    .style-5 .module {
      background-color: var(--white);
      border-radius: 16px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
      margin: 0 15px 15px;
      overflow: hidden;
    }
    
    .style-5 .module-header {
      padding: 15px 20px;
      font-weight: 600;
      border-bottom: 1px solid var(--border);
    }
    
    .style-5 .module-content {
      padding: 15px;
    }
    
    /* 风格6：优雅紫色 - 圆角卡片布局 */
    .style-6 {
      --primary: var(--style6);
    }
    
    .style-6 .profile-header {
      padding-bottom: 60px;
    }
    
    .style-6 .profile-cover {
      border-radius: 24px 24px 0 0;
    }
    
    .style-6 .profile-avatar {
      width: 100px;
      height: 100px;
      box-shadow: 0 4px 15px rgba(139, 92, 246, 0.2);
    }
    
    .style-6 .profile-actions {
      margin-bottom: 25px;
    }
    
    .style-6 .profile-btn {
      border-radius: 12px;
    }
    
    .style-6 .card {
      background-color: var(--white);
      border-radius: 20px;
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
      margin: 0 15px 20px;
      overflow: hidden;
    }
    
    .style-6 .posts-grid {
      gap: 8px;
      padding: 10px;
    }
    
    .style-6 .post-item {
      border-radius: 12px;
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    /* 响应式调整 */
    @media (max-width: 360px) {
      .profile-avatar {
        width: 80px;
        height: 80px;
        bottom: -40px;
      }
      
      .profile-info {
        padding-top: 50px;
      }
    }
  </style>
</head>
<body class="style-1">
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">选择我的页面样式</div>
    <div class="switcher-option active" data-style="1">经典社交</div>
    <div class="switcher-option" data-style="2">活力粉色</div>
    <div class="switcher-option" data-style="3">科技蓝</div>
    <div class="switcher-option" data-style="4">深色模式</div>
    <div class="switcher-option" data-style="5">活力橙</div>
    <div class="switcher-option" data-style="6">优雅紫色</div>
  </div>
  
  <div class="container">
    <!-- 风格1：经典社交 - 卡片式布局 -->
    <div class="profile-page active" id="page1">
      <div class="page-header">
        <h1 class="page-title">我的主页</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-cog"></i></button>
          <button class="header-btn"><i class="fa fa-envelope"></i></button>
        </div>
      </div>
      
      <div class="profile-header">
        <img src="https://picsum.photos/id/1048/800/300" alt="封面图" class="profile-cover">
        <img src="https://picsum.photos/id/64/200/200" alt="头像" class="profile-avatar">
      </div>
      
      <div class="card-section">
        <div class="profile-info">
          <h2 class="profile-name">张小明</h2>
          <p class="profile-bio">热爱生活的摄影师 | 旅行爱好者 | 美食探索家</p>
          
          <div class="profile-stats">
            <div class="stat-item">
              <div class="stat-value">248</div>
              <div class="stat-label">动态</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">1.2k</div>
              <div class="stat-label">粉丝</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">356</div>
              <div class="stat-label">关注</div>
            </div>
          </div>
          
          <div class="profile-actions">
            <button class="profile-btn btn-primary"><i class="fa fa-pencil"></i> 编辑资料</button>
            <button class="profile-btn btn-outline"><i class="fa fa-user-plus"></i> 关注</button>
          </div>
        </div>
        
        <div class="content-tabs">
          <div class="tab-item active">动态</div>
          <div class="tab-item">相册</div>
          <div class="tab-item">收藏</div>
        </div>
        
        <div class="tab-content">
          <div class="posts-grid">
            <div class="post-item">
              <img src="https://picsum.photos/id/29/300/300" alt="发布内容" class="post-image">
              <div class="post-overlay">
                <i class="fa fa-heart"></i> 128
              </div>
            </div>
            <div class="post-item">
              <img src="https://picsum.photos/id/30/300/300" alt="发布内容" class="post-image">
              <div class="post-overlay">
                <i class="fa fa-heart"></i> 95
              </div>
            </div>
            <div class="post-item">
              <img src="https://picsum.photos/id/31/300/300" alt="发布内容" class="post-image">
              <div class="post-overlay">
                <i class="fa fa-heart"></i> 210
              </div>
            </div>
            <div class="post-item">
              <img src="https://picsum.photos/id/32/300/300" alt="发布内容" class="post-image">
              <div class="post-overlay">
                <i class="fa fa-heart"></i> 76
              </div>
            </div>
            <div class="post-item">
              <img src="https://picsum.photos/id/33/300/300" alt="发布内容" class="post-image">
              <div class="post-overlay">
                <i class="fa fa-heart"></i> 156
              </div>
            </div>
            <div class="post-item">
              <img src="https://picsum.photos/id/34/300/300" alt="发布内容" class="post-image">
              <div class="post-overlay">
                <i class="fa fa-heart"></i> 321
              </div>
            </div>
            <div class="post-item">
              <img src="https://picsum.photos/id/35/300/300" alt="发布内容" class="post-image">
              <div class="post-overlay">
                <i class="fa fa-heart"></i> 89
              </div>
            </div>
            <div class="post-item">
              <img src="https://picsum.photos/id/36/300/300" alt="发布内容" class="post-image">
              <div class="post-overlay">
                <i class="fa fa-heart"></i> 176
              </div>
            </div>
            <div class="post-item">
              <img src="https://picsum.photos/id/37/300/300" alt="发布内容" class="post-image">
              <div class="post-overlay">
                <i class="fa fa-heart"></i> 203
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 风格2：活力粉色 - 标签式布局 -->
    <div class="profile-page" id="page2">
      <div class="page-header">
        <h1 class="page-title">个人主页</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-cog"></i></button>
        </div>
      </div>
      
      <div class="profile-header">
        <img src="https://picsum.photos/id/1060/800/300" alt="封面图" class="profile-cover">
        <img src="https://picsum.photos/id/65/200/200" alt="头像" class="profile-avatar">
      </div>
      
      <div class="profile-info">
        <h2 class="profile-name">李雨晴</h2>
        <p class="profile-bio">时尚博主 | 美妆达人 | 分享生活中的小确幸</p>
        
        <div class="tag-container">
          <span class="profile-tag">时尚</span>
          <span class="profile-tag">美妆</span>
          <span class="profile-tag">穿搭</span>
          <span class="profile-tag">旅行</span>
        </div>
        
        <div class="profile-stats">
          <div class="stat-item">
            <div class="stat-value">356</div>
            <div class="stat-label">作品</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">5.8k</div>
            <div class="stat-label">粉丝</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">124</div>
            <div class="stat-label">关注</div>
          </div>
        </div>
        
        <div class="profile-actions">
          <button class="profile-btn btn-primary"><i class="fa fa-user-plus"></i> 关注</button>
          <button class="profile-btn btn-outline"><i class="fa fa-share-alt"></i> 分享</button>
        </div>
      </div>
      
      <div class="content-tabs">
        <div class="tab-item active">精选</div>
        <div class="tab-item">动态</div>
        <div class="tab-item">关于</div>
      </div>
      
      <div class="tab-content">
        <ul class="menu-list">
          <li class="menu-item">
            <div class="menu-icon"><i class="fa fa-heart"></i></div>
            <div class="menu-text">我的喜欢</div>
            <div class="menu-arrow">&rarr;</div>
          </li>
          <li class="menu-item">
            <div class="menu-icon"><i class="fa fa-bookmark"></i></div>
            <div class="menu-text">收藏夹</div>
            <div class="menu-arrow">&rarr;</div>
          </li>
          <li class="menu-item">
            <div class="menu-icon"><i class="fa fa-star"></i></div>
            <div class="menu-text">我的成就</div>
            <div class="menu-arrow">&rarr;</div>
          </li>
          <li class="menu-item">
            <div class="menu-icon"><i class="fa fa-trophy"></i></div>
            <div class="menu-text">获得的赞</div>
            <div class="menu-arrow">2.4k</div>
          </li>
          <li class="menu-item">
            <div class="menu-icon"><i class="fa fa-comments"></i></div>
            <div class="menu-text">收到的评论</div>
            <div class="menu-arrow">867</div>
          </li>
        </ul>
      </div>
    </div>
    
    <!-- 风格3：科技蓝 - 简约数据式布局 -->
    <div class="profile-page" id="page3">
      <div class="page-header">
        <h1 class="page-title">个人中心</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-ellipsis-v"></i></button>
        </div>
      </div>
      
      <div class="profile-header">
        <img src="https://picsum.photos/id/1059/800/300" alt="封面图" class="profile-cover">
        <img src="https://picsum.photos/id/91/200/200" alt="头像" class="profile-avatar">
      </div>
      
      <div class="profile-info">
        <h2 class="profile-name">王建国</h2>
        <p class="profile-bio">产品经理 | 科技爱好者 | 程序员</p>
        
        <div class="profile-actions">
          <button class="profile-btn btn-primary">编辑资料</button>
        </div>
      </div>
      
      <div class="tab-content">
        <div class="stat-card">
          <div class="stat-card-title">账户数据</div>
          <div class="profile-stats">
            <div class="stat-item">
              <div class="stat-value">156</div>
              <div class="stat-label">文章</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">3.2k</div>
              <div class="stat-label">粉丝</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">258</div>
              <div class="stat-label">关注</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">12.5k</div>
              <div class="stat-label">获赞</div>
            </div>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-card-title">我的内容</div>
          <div class="posts-grid">
            <div class="post-item">
              <img src="https://picsum.photos/id/160/300/300" alt="发布内容" class="post-image">
            </div>
            <div class="post-item">
              <img src="https://picsum.photos/id/161/300/300" alt="发布内容" class="post-image">
            </div>
            <div class="post-item">
              <img src="https://picsum.photos/id/162/300/300" alt="发布内容" class="post-image">
            </div>
            <div class="post-item">
              <img src="https://picsum.photos/id/163/300/300" alt="发布内容" class="post-image">
            </div>
            <div class="post-item">
              <img src="https://picsum.photos/id/164/300/300" alt="发布内容" class="post-image">
            </div>
            <div class="post-item">
              <img src="https://picsum.photos/id/165/300/300" alt="发布内容" class="post-image">
            </div>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-card-title">最近活动</div>
          <ul class="menu-list">
            <li class="menu-item">
              <div class="menu-icon"><i class="fa fa-comment"></i></div>
              <div class="menu-text">评论了文章《产品设计思考》</div>
              <div class="menu-arrow">2小时前</div>
            </li>
            <li class="menu-item">
              <div class="menu-icon"><i class="fa fa-heart"></i></div>
              <div class="menu-text">点赞了3条动态</div>
              <div class="menu-arrow">昨天</div>
            </li>
            <li class="menu-item">
              <div class="menu-icon"><i class="fa fa-share"></i></div>
              <div class="menu-text">分享了新文章</div>
              <div class="menu-arrow">3天前</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    
    <!-- 风格4：深色模式 - 沉浸式布局 -->
    <div class="profile-page" id="page4">
      <div class="page-header">
        <h1 class="page-title">我的空间</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-cog"></i></button>
          <button class="header-btn"><i class="fa fa-bell"></i></button>
        </div>
      </div>
      
      <div class="profile-header">
        <img src="https://picsum.photos/id/1074/800/300" alt="封面图" class="profile-cover">
        <img src="https://picsum.photos/id/177/200/200" alt="头像" class="profile-avatar">
      </div>
      
      <div class="profile-info">
        <h2 class="profile-name">陈思远</h2>
        <p class="profile-bio">游戏设计师 | 音乐制作人 | 夜猫子</p>
        
        <div class="profile-stats">
          <div class="stat-item">
            <div class="stat-value">89</div>
            <div class="stat-label">作品</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">2.4k</div>
            <div class="stat-label">粉丝</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">156</div>
            <div class="stat-label">关注</div>
          </div>
        </div>
        
        <div class="profile-actions">
          <button class="profile-btn btn-primary"><i class="fa fa-pencil"></i> 编辑资料</button>
          <button class="profile-btn btn-outline"><i class="fa fa-plus"></i></button>
        </div>
      </div>
      
      <div class="content-tabs">
        <div class="tab-item active">动态</div>
        <div class="tab-item">作品</div>
        <div class="tab-item">数据</div>
      </div>
      
      <div class="tab-content">
        <ul class="menu-list">
          <li class="menu-item">
            <div class="menu-icon"><i class="fa fa-gamepad"></i></div>
            <div class="menu-text">我的游戏</div>
            <div class="menu-arrow">&rarr;</div>
          </li>
          <li class="menu-item">
            <div class="menu-icon"><i class="fa fa-music"></i></div>
            <div class="menu-text">音乐作品</div>
            <div class="menu-arrow">&rarr;</div>
          </li>
          <li class="menu-item">
            <div class="menu-icon"><i class="fa fa-clock-o"></i></div>
            <div class="menu-text">活动记录</div>
            <div class="menu-arrow">&rarr;</div>
          </li>
          <li class="menu-item">
            <div class="menu-icon"><i class="fa fa-trophy"></i></div>
            <div class="menu-text">成就徽章</div>
            <div class="menu-arrow">12个</div>
          </li>
          <li class="menu-item">
            <div class="menu-icon"><i class="fa fa-shopping-cart"></i></div>
            <div class="menu-text">我的订单</div>
            <div class="menu-arrow">&rarr;</div>
          </li>
          <li class="menu-item">
            <div class="menu-icon"><i class="fa fa-credit-card"></i></div>
            <div class="menu-text">会员中心</div>
            <div class="menu-arrow">&rarr;</div>
          </li>
        </ul>
      </div>
    </div>
    
    <!-- 风格5：活力橙 - 模块化布局 -->
    <div class="profile-page" id="page5">
      <div class="page-header">
        <h1 class="page-title">个人主页</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-cog"></i></button>
        </div>
      </div>
      
      <div class="profile-header">
        <img src="https://picsum.photos/id/1061/800/300" alt="封面图" class="profile-cover">
        <img src="https://picsum.photos/id/237/200/200" alt="头像" class="profile-avatar">
      </div>
      
      <div class="profile-actions">
        <button class="profile-btn btn-primary"><i class="fa fa-pencil"></i> 编辑资料</button>
        <button class="profile-btn btn-outline"><i class="fa fa-share-alt"></i></button>
      </div>
      
      <div class="module">
        <div class="module-content">
          <h2 class="profile-name">赵晓阳</h2>
          <p class="profile-bio">美食博主 | 旅行摄影师 | 生活记录者</p>
          
          <div class="profile-stats">
            <div class="stat-item">
              <div class="stat-value">421</div>
              <div class="stat-label">帖子</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">8.7k</div>
              <div class="stat-label">粉丝</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">321</div>
              <div class="stat-label">关注</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">45.2k</div>
              <div class="stat-label">获赞</div>
            </div>
          </div>
        </div>
      </div>
      
      <div class="module">
        <div class="module-header">我的动态</div>
        <div class="module-content">
          <div class="posts-grid">
            <div class="post-item">
              <img src="https://picsum.photos/id/292/300/300" alt="发布内容" class="post-image">
            </div>
            <div class="post-item">
              <img src="https://picsum.photos/id/293/300/300" alt="发布内容" class="post-image">
            </div>
            <div class="post-item">
              <img src="https://picsum.photos/id/294/300/300" alt="发布内容" class="post-image">
            </div>
            <div class="post-item">
              <img src="https://picsum.photos/id/295/300/300" alt="发布内容" class="post-image">
            </div>
            <div class="post-item">
              <img src="https://picsum.photos/id/296/300/300" alt="发布内容" class="post-image">
            </div>
            <div class="post-item">
              <img src="https://picsum.photos/id/297/300/300" alt="发布内容" class="post-image">
            </div>
          </div>
        </div>
      </div>
      
      <div class="module">
        <div class="module-header">我的收藏</div>
        <div class="module-content">
          <ul class="menu-list">
            <li class="menu-item">
              <div class="menu-icon"><i class="fa fa-cutlery"></i></div>
              <div class="menu-text">美食推荐</div>
              <div class="menu-arrow">24</div>
            </li>
            <li class="menu-item">
              <div class="menu-icon"><i class="fa fa-map-marker"></i></div>
              <div class="menu-text">旅行目的地</div>
              <div class="menu-arrow">18</div>
            </li>
            <li class="menu-item">
              <div class="menu-icon"><i class="fa fa-camera"></i></div>
              <div class="menu-text">摄影作品</div>
              <div class="menu-arrow">36</div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    
    <!-- 风格6：优雅紫色 - 圆角卡片布局 -->
    <div class="profile-page" id="page6">
      <div class="page-header">
        <h1 class="page-title">我的主页</h1>
        <div class="header-actions">
          <button class="header-btn"><i class="fa fa-cog"></i></button>
          <button class="header-btn"><i class="fa fa-envelope"></i></button>
        </div>
      </div>
      
      <div class="profile-header">
        <img src="https://picsum.photos/id/1062/800/300" alt="封面图" class="profile-cover">
        <img src="https://picsum.photos/id/55/200/200" alt="头像" class="profile-avatar">
      </div>
      
      <div class="profile-info">
        <h2 class="profile-name">林婉儿</h2>
        <p class="profile-bio">插画师 | 设计师 | 手账爱好者</p>
        
        <div class="profile-actions">
          <button class="profile-btn btn-primary"><i class="fa fa-user-plus"></i> 关注</button>
          <button class="profile-btn btn-outline"><i class="fa fa-paper-plane"></i> 私信</button>
        </div>
      </div>
      
      <div class="card">
        <div class="profile-stats" style="padding: 15px;">
          <div class="stat-item">
            <div class="stat-value">215</div>
            <div class="stat-label">作品</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">6.3k</div>
            <div class="stat-label">粉丝</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">148</div>
            <div class="stat-label">关注</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">32.8k</div>
            <div class="stat-label">获赞</div>
          </div>
        </div>
      </div>
      
      <div class="card">
        <div class="content-tabs" style="border-bottom: none;">
          <div class="tab-item active">作品</div>
          <div class="tab-item">动态</div>
          <div class="tab-item">关于</div>
        </div>
        
        <div class="tab-content">
          <div class="posts-grid">
            <div class="post-item">
              <img src="https://picsum.photos/id/96/300/300" alt="发布内容" class="post-image">
            </div>
            <div class="post-item">
              <img src="https://picsum.photos/id/91/300/300" alt="发布内容" class="post-image">
            </div>
            <div class="post-item">
              <img src="https://picsum.photos/id/92/300/300" alt="发布内容" class="post-image">
            </div>
            <div class="post-item">
              <img src="https://picsum.photos/id/93/300/300" alt="发布内容" class="post-image">
            </div>
            <div class="post-item">
              <img src="https://picsum.photos/id/94/300/300" alt="发布内容" class="post-image">
            </div>
            <div class="post-item">
              <img src="https://picsum.photos/id/95/300/300" alt="发布内容" class="post-image">
            </div>
            <div class="post-item">
              <img src="https://picsum.photos/id/96/300/300" alt="发布内容" class="post-image">
            </div>
            <div class="post-item">
              <img src="https://picsum.photos/id/97/300/300" alt="发布内容" class="post-image">
            </div>
            <div class="post-item">
              <img src="https://picsum.photos/id/98/300/300" alt="发布内容" class="post-image">
            </div>
          </div>
        </div>
      </div>
      
      <div class="card" style="margin-bottom: 80px;">
        <div class="module-header">个人简介</div>
        <div class="module-content">
          <p>自由插画师，毕业于中央美术学院，擅长水彩和数码绘画。</p>
          <p>曾为多本儿童书籍绘制插画，作品曾入选国际插画展。</p>
          <p>不定期分享绘画教程和创作心得，欢迎交流。</p>
          
          <div style="margin-top: 15px;">
            <div style="font-weight: 600; margin-bottom: 8px;">联系方式</div>
            <div style="display: flex; gap: 15px;">
              <a href="#" style="color: var(--primary);"><i class="fa fa-instagram fa-lg"></i></a>
              <a href="#" style="color: var(--primary);"><i class="fa fa-twitter fa-lg"></i></a>
              <a href="#" style="color: var(--primary);"><i class="fa fa-behance fa-lg"></i></a>
              <a href="#" style="color: var(--primary);"><i class="fa fa-dribbble fa-lg"></i></a>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 控制按钮 -->
    <div class="control-buttons">
      <button class="control-btn" id="prevBtn">
        <i class="fa fa-chevron-left"></i> 上一个
      </button>
      <button class="control-btn" id="nextBtn">
        下一个 <i class="fa fa-chevron-right"></i>
      </button>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 当前状态
    let currentStyle = 1;
    
    // DOM元素
    const switcherOptions = document.querySelectorAll('.switcher-option');
    const profilePages = {
      1: document.getElementById('page1'),
      2: document.getElementById('page2'),
      3: document.getElementById('page3'),
      4: document.getElementById('page4'),
      5: document.getElementById('page5'),
      6: document.getElementById('page6')
    };
    const prevButton = document.getElementById('prevBtn');
    const nextButton = document.getElementById('nextBtn');
    const bodyElement = document.body;
    
    // 初始化
    function init() {
      // 切换样式
      switcherOptions.forEach(option => {
        option.addEventListener('click', function() {
          const style = parseInt(this.getAttribute('data-style'));
          switchStyle(style);
        });
      });
      
      // 上一个/下一个按钮
      prevButton.addEventListener('click', showPrevStyle);
      nextButton.addEventListener('click', showNextStyle);
      
      // 初始化标签切换
      initTabs();
    }
    
    // 初始化标签切换功能
    function initTabs() {
      document.querySelectorAll('.tab-item').forEach(tab => {
        tab.addEventListener('click', function() {
          // 移除同组所有标签的active类
          const tabContainer = this.parentElement;
          tabContainer.querySelectorAll('.tab-item').forEach(item => {
            item.classList.remove('active');
          });
          
          // 给当前点击的标签添加active类
          this.classList.add('active');
        });
      });
    }
    
    // 关闭所有页面
    function closeAllPages() {
      Object.values(profilePages).forEach(page => {
        page.classList.remove('active');
      });
    }
    
    // 切换样式
    function switchStyle(style) {
      // 移除所有样式类
      bodyElement.classList.remove('style-1', 'style-2', 'style-3', 'style-4', 'style-5', 'style-6');
      
      // 添加当前样式类
      bodyElement.classList.add(`style-${style}`);
      
      // 更新当前样式
      currentStyle = style;
      
      // 更新切换器选中状态
      switcherOptions.forEach(option => {
        option.classList.remove('active');
        if (parseInt(option.getAttribute('data-style')) === style) {
          option.classList.add('active');
        }
      });
      
      // 更新控制按钮颜色
      document.querySelectorAll('.control-btn').forEach(btn => {
        btn.style.backgroundColor = 'var(--primary)';
      });
      
      // 显示对应页面
      closeAllPages();
      profilePages[style].classList.add('active');
    }
    
    // 显示上一个样式
    function showPrevStyle() {
      let prev = currentStyle - 1;
      if (prev < 1) prev = 6;
      switchStyle(prev);
    }
    
    // 显示下一个样式
    function showNextStyle() {
      let next = currentStyle + 1;
      if (next > 6) next = 1;
      switchStyle(next);
    }
    
    // 启动
    init();
  </script>
</body>
</html>
